<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= webpackConfig.name %></title>

    <script async type="text/javascript" src="opencv_4.5.js" onload="load()"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>

    <canvas id="b" style="display: none;"></canvas>
    <div id="app" >
      <script type="text/javascript">
        function load() {
          window.cv = cv
        }

        function imgStork() {
          const image = new Image()
          image.src = 'https://st0.dancf.com/02/material_uploader/202010150436-5543.png'
          image.crossOrigin = ''
          image.onload = () => {
            const canvasImg = document.createElement('canvas')
            canvasImg.width = 800
            canvasImg.height = 800
            const ctx = canvasImg.getContext('2d')
            ctx.drawImage(image, 0, 0)
            const imgDatas = ctx.getImageData(0, 0, 800, 800)
            // let image_mat = cv.imread(image)
            let image_mat = cv.matFromImageData(imgDatas)
            let split_mat_list = new cv.MatVector()
            cv.split(image_mat, split_mat_list)
            let process_mat = split_mat_list.get(3)
            cv.threshold(process_mat, process_mat, 100, 255, cv.THRESH_BINARY)
            let contours = new cv.MatVector()
            let hierarchy = new cv.Mat()
            cv.findContours(process_mat, contours, hierarchy, cv.RETR_TREE, cv.CHAIN_APPROX_SIMPLE)
            // let dst = cv.Mat.zeros(image_mat.cols, image_mat.rows, cv.CV_8UC4);
            for (let i = 0; i < contours.size(); ++i) {
              // let color = new cv.Scalar(Math.round(Math.random() * 255), Math.round(Math.random() * 255), Math.round(Math.random() * 255), 255);
              let color = new cv.Scalar(255, 0, 0, 255)
              cv.drawContours(image_mat, contours, i, color, 100, cv.LINE_8, hierarchy, 100)
            }
            console.log(image_mat, hierarchy)
            cv.imshow('b', image_mat)
            const imgData = new ImageData(new Uint8ClampedArray(image_mat.data), image_mat.cols, image_mat.rows)
            console.log(imgData)
            const canvas = document.createElement('canvas')
            canvas.width = 800
            canvas.height = 800
            canvas.getContext('2d').putImageData(imgData, 0, 0)
            document.body.appendChild(canvas)
          }
        }


        function aM(left, right) {
          let newArr = []
          for(let i = 0; i < left.length; i++) {
            newArr.push(left[i] * right[i] / 255)
          }
          console.log(left, right, newArr)
          return newArr
        }

        function aS(left, right) {
          let newArr = []
          let result = []
          for(let i = 0; i < left.length; i++) {
            const newLeft = 255 - left[i]
            const newRight = 255 - right[i]
            newArr.push(newLeft * newRight / 255)
          }
          for (let i = 0; i < newArr.length; i++) {
            result.push(255 - newArr[i])
          }
          console.log(newArr)
          return result
        }

        function alphaA(left, right, alpha) {
          const newArr = []
          for(let i = 0; i < left.length; i++) {
            const val = right[i] * alpha + (1 - alpha) * left[i]
            newArr.push(val)
          }
          return newArr
        }
      </script>
    </div>
    <!-- built files will be auto injected -->
  </body>
</html>
